import React, { useState } from 'react'
import { View, Text, Button } from '@tarojs/components'
import './lightup.less'
import { Square } from "../../utils";


const Lightup = () => {
  const [merchants, setMerchants] = useState([
    { id: 1, logo: '', name: 'XX产康', lightUp: 1 },
    { id: 2, logo: '', name: 'XX产康', lightUp: 1 },
    { id: 3, logo: '', name: 'XX产康', lightUp: 1 },
    { id: 4, logo: '', name: 'XX产康', lightUp: 1 },
    { id: 5, logo: '', name: 'XX产康', lightUp: 1 },
    { id: 6, logo: '', name: 'XX产康', lightUp: 1 },
  ])

  return (
    <View className='base'>
      <View className='box flex-row'>
        <View className='flex-column center'>
          <Square />
          <Text>兑换服务</Text>
        </View>
        <View className='flex-column center'>
          <Square />
          <Text>核销点亮</Text>
        </View>
        <View className='flex-column center'>
          <Square />
          <Text>上传小票</Text>
        </View>
        <View className='flex-column center'>
          <Square />
          <Text>获得VIP+金币</Text>
        </View>
      </View>

      <View className='box flex-column center'>
        <Text>-开始点亮-</Text>
        <View className='flex-row' style='width: 100%'>
          <View>查看规则</View>
          <View>已点亮 1/100</View>
        </View>
        <View className='merchant-container'>
          {merchants.map(m => (
            <View key={m.id} className='merchant-box flex-column center'>
              <Square />
              <Text> {m.name}</Text>
              <Button size='mini'>{m.lightUp}</Button>
            </View>
          ))}

        </View>
      </View>


    </View>
  )
}

export default Lightup
